import React, { useEffect, useState } from 'react'
// 1. 导入图表
import * as echarts from 'echarts';


const ECharts = () => {
    const [value,setValue] = useState(0)


  useEffect(()=>{
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    

    // 4. 绘制图表
    myChart.setOption({
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 40,
              fontSize: 20
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} km/h',
              color: 'inherit'
            },
            data: [
              {
                value: value
              }
            ]
          }
        ]
      });


      setInterval(function () {

        setValue(value + 2)

        if(value >= 100){
            setValue(0)
        }

        myChart.setOption({
          series: [
            {
              data: [
                {
                  value: value
                }
              ]
            }
          ]
        });
      }, 1000);

  }, [value])

  return (
    <div>
        <h1>ECharts</h1>
        {/* 2. 准备一个 DOM */}
        <div style={{height: 500}} id='main'></div>
    </div>
  )
}

export default ECharts